import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {View, Image, Text} from '@tarojs/components';
import {AtSearchBar} from 'taro-ui'
import {GetRequest} from "../../utils/tools";
import {http} from "../../utils/http";
import {TARO_ENV, RESOURCE_URL, APP_SCENIC_DETAIL, APP_SCENIC_LIST} from "../../constants/api";
import classnames from "classnames";
import typeList from './typeList';
import "./index.scss";

const tempMenus = [
    {
        id: 1,
        name: "景点",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930803615_272.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996573809_288.png",
        type: "",
        children: []
    },
    {
        id: 3,
        name: "餐厅",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930682641_302.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996462649_893.png",
        type: "",
        children: []
    },
    {
        id: 4,
        name: "小卖部",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930919809_5.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996695528_101.png",
        type: "",
        children: []
    },
    {
        id: 9,
        name: "医院",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930935962_551.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996710664_309.png",
        type: "",
        children: []
    },
    {
        id: 13,
        name: "住宅",
        icon: "https://resource.ivcheng.com/upload/images/20220831/1661930950019_557.png",
        iconMarker: "https://resource.ivcheng.com/upload/images/20220901/1661996732005_94.png",
        type: "",
        children: []
    },
];
const defaultPhoto = "https://resource.ivcheng.com/upload/images/20220901/1662002123131_56.jpg";

export default class List extends Component {
	constructor(props) {
		super(props);
		this.state = {
			initLoad: true,
			loadFinished: false,
			searchKey: "",
			currentTab: "",
			currentIcon: "",
			tabs: [],
			listData: []
		};
	}

	componentWillMount() {
		this.getMenus();
    }
    onReachBottom() {
    	/*if(this.state.loadFinished) return;
    	this.getList();*/
    }
    // get menus
    getMenus = async () => {
        const { location: { params: { id, pkey, skey } } } = this.props;
        const res = await http.HGet(APP_SCENIC_DETAIL, {scenic_id: id, "p-key": pkey});
        const { setData } = res.data;
        const sysMenus = setData.sys_menu.split(",");
        const tabs = [];
        for(let j = 0, len2 = sysMenus.length; j < len2; j++) {
            const tempName = sysMenus[j];
            for(let i = 0, len = typeList.length; i < len; i++) {
                const name = typeList[i].name;
                if(tempName === name) {
                    tabs.push(typeList[i]);
                    break;
                }
            }
        }
        const currentTab = tabs[0].name;
        const currentIcon = tabs[0].icon;
        this.setState({ currentTab, currentIcon, tabs }, () => {
        	this.getList(tabs[0].name);
        });
    }
    // get list
    getList = async (typeVal) => {
    	const { location: { params: { id, pkey, skey } } } = this.props;
    	const { searchKey, currentTab, currentIcon, tabs } = this.state;
    	Taro.showLoading({title: "加载中", mask: true});
        const res = await http.HGet(APP_SCENIC_LIST, {scenic_id: id, "p-key": pkey, "s-key": skey, type: typeVal, name: searchKey});
        const datas = res.data || [];
        let tempCurrentTab = currentTab, tempCurrentIcon = currentIcon;
        if(datas.length > 0) {
            if(datas[0].type && currentTab !== datas[0].type) {
                const tabObj = tabs.find(item => item.name === datas[0].type);
                tempCurrentTab = datas[0].type;
                tempCurrentIcon = tabObj.icon;
            }
        }

        this.setState(state => ({
            currentTab: tempCurrentTab,
            currentIcon: tempCurrentIcon,
        	listData: state.listData.concat(datas),
        	initLoad: false,
        	loadFinished: datas.length < 4 ? true : 0
        }), () => {
        	Taro.hideLoading();
        });
    }
    // search input
    onInputChange = value => {
		this.setState({
			searchKey: value
		})
	};
	// search button
	onClickSearch = () => {
		const { currentTab } = this.state;
		this.setState({
			initLoad: true,
			listData: []
		}, () => {
			this.getList(currentTab);
		});
	};
	// tab change
	handleClickTab(item) {
		this.setState({
			initLoad: true,
			currentTab: item.name,
			currentIcon: item.icon,
			listData: []
		}, () => {
			this.getList(item.name);
		});
	}
	// view item
	handleView(item) {
        console.log("view item : ", item);
		const { currentTab } = this.state;
        const params = Taro.getCurrentInstance().router.params;
        const { pkey } = params;
		Taro.navigateTo({
            url: `/other/mapNavigation/index?id=${item.scenic_id}&pkeys=${pkey}&listId=${item.id}&type=${currentTab}&lat=${item.latitude}&lng=${item.longitude}`
        })
	}

    render() {
    	const { initLoad, currentTab, currentIcon, tabs, listData } = this.state;

    	return (
    		<View className="list-page">
    			<View className="top-area">
	    			<AtSearchBar
						showActionButton
						value={this.state.searchKey}
						onChange={this.onInputChange}
						onActionClick={this.onClickSearch}
					/>
					<View className="tabs">
						{
							tabs.map((item, index) => (
								<View
									className={classnames("tab-item", {
										"active": currentTab === item.name
									})}
									key={index}
									onClick={() => this.handleClickTab(item)}
								>
									<Text className="ti-item">{ item.name }</Text>
								</View>
							))
						}
					</View>
				</View>
				<View className="list-area">
					{
						listData.length > 0 &&
						listData.map((item, index) => (
							<View className="list-item" key={index} onClick={() => this.handleView(item)}>
								<View className="left">
									<Image src={currentIcon} mode='aspectFit' className="li-icon" />
								</View>
								<View className="right">
									<View className="title-box">
										<View className="title">{item.name}</View>
										<View className="distance">
                                            {
                                                item.distance > 99 ?
                                                <Text>> 99km</Text>
                                                :
                                                <Text>{item.distance}km</Text>
                                            }
                                        </View>
									</View>
								</View>
							</View>
						))
					}
					{
						!initLoad && listData.length === 0 &&
						<View className="empty-list">
							<Text className="empty-text">暂无数据</Text>
						</View>
					}
				</View>
    		</View>
    	)
    }
}
